import React, { Component } from 'react'
import './SendMsg.css'
import { emojis } from './emoji'
import { Grid, Swiper } from 'antd-mobile'

/* 聊天-发送消息的组件 */
export default class SendMsg extends Component {
   state = {
      overFlow: false, // 文本溢出
      content: '',
      showEmojis: false, // 显示表情包容器
   }
   /* 判断文本是否溢出 */
   isOverFlow = (ele) => {
      let flag = ele.offsetWidth < ele.scrollWidth
      // inp
      if (ele.nodeName === 'INPUT' && flag) {
         this.setState({ overFlow: true })
      }
      // textarea
      if (ele.nodeName === 'TEXTAREA' && ele.value.replace(/[\u0391-\uFFE5]/g, "aa").length <= 44) {
         this.setState({ overFlow: false })
      }
      return flag
   }
   /* 存储输入框的内容 */
   savaInput = (e) => {
      const inp = e.target
      this.setState({ content: inp.value })
      if (this.isOverFlow(inp)) {
         const textarea = this.refs.textarea
         setTimeout(() => {
            textarea.focus()
         }, 200)
      }
   }
   /* 存储文本域的内容 */
   saveTextarea = (e) => {
      const ele = e.target
      this.setState({ content: ele.value })
      if (!this.isOverFlow(ele)) {
         const inp = this.refs.inp
         setTimeout(() => {
            inp.focus()
         }, 200)
      }
   }
   /* 发送消息 */
   sendContent = () => {
      if (!this.state.content) return
      // 提交信息数据
      this.props.submit(this.state.content, () => {
         if (this.state.showEmojis) {
            this.setState({ showEmojis: false })
         }
      })
      this.setState({ content: '' })
   }
   /* 键盘事件 */
   keyDown = (e) => {
      let code = e.keyCode
      // 回车发送消息
      if (code === 13) {
         this.sendContent()
      }
   }
   /* 开启/关闭-表情包容器 */
   toggleEmjoiBox = () => {
      this.setState({ showEmojis: !this.state.showEmojis }, () => {
         // 移动聊天列表的滚动条到最底部
         this.props.scrollEnd()
      })
   }
   /* 选择对应的表情包加入内容区 */
   inputEmoji = (val) => {
      this.setState({ content: this.state.content + val })
   }
   render() {
      const { overFlow, content, showEmojis } = this.state
      return (
         <div className='send-msg-box'>
            <div className='box-1'>
               <input type="text" placeholder='请输入'
                  value={content}
                  onChange={this.savaInput}
                  style={{ display: !overFlow ? null : 'none' }}
                  ref='inp'
                  onKeyDown={this.keyDown}
               />
               <textarea name="" className='text'
                  value={content} onChange={this.saveTextarea} ref='textarea'
                  style={{ display: overFlow ? null : 'none' }}
                  onKeyDown={this.keyDown}
               ></textarea>
               <div className='emoji-btn' onClick={this.toggleEmjoiBox}>😝</div>
               <button className='send-btn' onClick={this.sendContent}>发送</button>
            </div>
            {/* 表情包容器 */}
            {showEmojis && <div className='emoji-box'>
               <Swiper>{
                  emojis.map((item1, i) => (
                     <Swiper.Item key={i}>
                        <Grid columns={8} gap={2} key={i}>{
                           item1.map((item2, j) => (
                              <Grid.Item key={i * 8 + j} onClick={(e) => this.inputEmoji(e.target.innerHTML)}>{item2}</Grid.Item>)
                           )
                        }</Grid>
                     </Swiper.Item>
                  ))
               }</Swiper></div>}
         </div>
      )
   }
}
